<!--
 * @Author: lmh
 * @Date: 2021-09-06 21:18:25
 * @LastEditTime: 2021-09-08 00:21:12
 * @LastEditors: lmh
 * @Description: 防抖节流
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖节流</title>
</head>
<body>
    
</body>
<script>
    // 防抖
    // 概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
    // 场景：给按钮加函数防抖防止表单多次提交。
    function debounce(fn, wait) {
        var timer = null;
        return function() {
            var context = this;
            var args = arguments;
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            timer = setTimeout(function() {
                fn.apply(context, args);
            }, wait)
        }
    }
    var fn = function () {
        console.log('boom_debounce')
    }
    setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次
    setInterval(debounce(fn,2000),1000) // 不会触发一次（我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）

    // 节流
    // 概念：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
    // 场景：DOM元素拖拽
    function throttle(fn, gapTime) {
        let _lastTime = null;
        return function() {
            let _nowTime = + new Date();
            if(_nowTime - _lastTime > gapTime || !_lastTime) {
                fn();
                _lastTime = _nowTime;
            }
        }
    }
    let fn1 = () => {
        console.log('boom_throttle')
    }
    setInterval(throttle(fn1,2000),10)
</script>
</html>
